<template>
    <div class="address-add plr15 pt15" >
        <div class="group1">
            <van-field
                title-width="60px"
                clearable
                label="收货人"
                :value="form.name"
                placeholder="请输入收货人姓名"
                v-on:change="nameChange"
            />
            <van-field
                title-width="60px"
                clearable
                label="手机号码"
                :value="form.mobile"
                placeholder="请输入手机号码"
                v-on:change="mobileChange"
            />
        </div>

        <div class="group1 mt10">
            <van-field
                title-width="60px"
                label="所在地区"
                :value="form.name"
                placeholder="请选择所在地区"
                is-link
                @click="show=true"
                disabled
            />
            <van-field
                title-width="60px"
                clearable
                label="详细地址"
                :value="form.idcard"
                placeholder="请输入详细地址"
                v-on:change="idcardChange"
            />
        </div>

        <div class="group1 mt10">
            <van-field
                label="设为默认地址"
                placeholder=" "
                :border="false"
                disabled
                >
                <van-switch slot="button" :value="checked" v-on:change="onChange" active-color="#06cca2" />
            </van-field>
        </div>

        <van-popup :show="show" position="bottom" >
            <van-area 
                v-on:confirm="selAddress"
                v-on:cancel="show=false"
                :area-list="areaList"/>
        </van-popup>


        <div class=" mt30">
            <div class="add-btn fs-15 lh15 " @click="validate">确定</div>
            <div class="del-btn fs-15 lh15 mt15">删除</div>
        </div>
    </div>
</template>

<script>
import area from '@/plugins/utils/area'
import passengerApi from "@/api/api-passenger";
import ValidatorUtils from '@/plugins/utils/validator'
import _ from 'underscore';
export default {
    name: "addressAdd",
    components: {

    },
    data(){
        return {
            checked: false,
            form: {
                name: '',
                mobile: '',
                idcard: '',
                is_default: false,
            },
            form2: {

            },
            id: "",
            rules: {
                name: [
                    { required: true, message: '请输入姓名' },
                    { min: 1, max: 15, message: '姓名长度在 1 到 15 个字符' },
                ],
                mobile: [
                    { required: true, message: '请输入联系电话' },
                    { pattern: /^[1][0-9]{10}$/, message: '请输入正确的手机号码' }
                ],
                allArea: [
                    { required: true, message: '请选择地区' }
                ],
                detail: [
                    { required: true, message: '请输入详细地址' },
                    { min: 1, max: 30, message: '详细地址长度在 1 到 30 个字符' },
                ],
            },
            validator: undefined,
            areaList: area,
            show: false
        }
    },
    onLoad(option){   
        this.id = option.id
    },
    mounted() {
        if(this.id){
            // this.GetPassenger()
        }
    },
    methods: {
        onChange(e){
            this.checked = !this.checked
        } ,
        GetPassenger(){
            var vm = this
            passengerApi.GetPassenger({passengerId: this.id}).then(res => {
                var result = res.result
                _.assign(this.form, result)
            })
        },
        nameChange(event){
            this.form2.name = event.mp.detail
        },
        idcardChange(event){
            this.form2.idcard = event.mp.detail
        },
        mobileChange(event){
            this.form2.mobile = event.mp.detail
        },
        showToast(msg, icon){
            wx.showToast({
                title: msg,
                icon: icon || "none",
                duration: 2000
            })
        },
        validate() {
            _.assign(this.form, this.form2)
            if(!ValidatorUtils.isLenRange(this.form.name, [1, 15])){
                this.showToast('姓名长度在1到15个字符')
                return
            }
            if(!ValidatorUtils.isIdcard(this.form.idcard, [1, 30])){
                this.showToast('请输入正确的身份证号')
                return
            }
            if(!ValidatorUtils.isMobile(this.form.mobile)){
                this.showToast('请输入正确的手机号码')
                return
            }
            
            
            if(this.id){
                this.update()
            } else{
                this.add()
            }
        },
        add(){
            var vm = this
            wx.showLoading({
                title: '提交中',
            })
            var form = {}
            _.assign(form, this.form)
            passengerApi.AddPassenger(form).then(res => {
                wx.hideToast()
                this.showToast('添加成功', 'success')
                wx.setStorageSync("refresh-address", "1")
                wx.navigateBack()
            }).catch(e => {
                wx.hideToast()
                this.showToast('添加失败')
            })
        },
        update(){
            var vm = this
            wx.showLoading({
                title: '提交中',
            })
            var form = {}
            _.assign(form, this.form)
            delete form.allArea
            form.passengerId = this.id
            passengerApi.UpdatePassenger(form).then(res => {
                wx.hideToast()
                this.showToast('修改成功', 'success')
                wx.setStorageSync("refresh-address", "1")
                wx.navigateBack()
            }).catch(e => {
                wx.hideToast()
                this.showToast('修改失败')
            })
        },
        selAddress(data){
            _.assign(this.form, this.form2)
            data = data.mp.detail.values
            if(!data[2] || !data[2].code){

            } else {
                this.form.allArea = data[0].name + data[1].name + data[2].name 
                this.form.province = data[0].code
                this.form.province_str = data[0].name
                this.form.city = data[1].code
                this.form.city_str = data[1].name
                this.form.area = data[2].code
                this.form.area_str = data[2].name
            }
            this.show = false
        },
        changeDefault(e){
            _.assign(this.form, this.form2)
            this.form.is_default = !this.form.is_default
        },
        showArea(){
            _.assign(this.form, this.form2);
            this.show = true
        },
    }
};
</script>
<style lang="scss" scope>
@import './css/add.scss';
.address-add{
    .van-picker__cancel, .van-picker__confirm{
        border: none;
        background: #fff;
    }
}
</style>
